---
title: Labeling Features
description: This demo shows how to add static text labels to the center of features. <strong>This is not the same as fitting labels dynamically</strong>, so labels will start to collide as you zoom out.
layout: example.hbs
---

<style>
  .label {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: -1em;
  }

  .label div {
    position: relative;
    left: -50%;
    text-shadow: 0px 2px 1px rgba(255,255,255,0.85);
  }
</style>

<div id="map"></div>

<script>
  var map = L.map('map').setView([45.526, -122.667], 15);

  L.esri.basemapLayer('Gray').addTo(map);

  var neighborhoods = L.esri.featureLayer({
    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Neighborhoods_pdx/FeatureServer/0',
    style: function() {
      return {
        color: '#5B7CBA',
        weight: 2
      };
    }
  }).addTo(map);

  var labels = {};

  neighborhoods.on('createfeature', function(e){
    var id = e.feature.id;
    var feature = neighborhoods.getFeature(id);
    var center = feature.getBounds().getCenter();
    var label = L.marker(center, {
      icon: L.divIcon({
        iconSize: null,
        className: 'label',
        html: '<div>' + e.feature.properties.NAME + '</div>'
      })
    }).addTo(map);
    labels[id] = label;
  });

  neighborhoods.on('addfeature', function(e){
    var label = labels[e.feature.id];
    if(label){
      label.addTo(map);
    }
  });

  neighborhoods.on('removefeature', function(e){
    var label = labels[e.feature.id];
    if(label){
      map.removeLayer(label);
    }
  });
</script>
